@keyframes load {

  0%,
  100% {
    height: 40px;
    background: lightgreen;
  }

  50% {
    height: 120px;
    margin: 0px 5px;
    background: lightblue;
  }
}

@keyframes show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.imgPlaceHoldBox {
  transition: all 0.3s;
  margin: 0 auto;
  overflow: hidden;
}

.hasAnimate img {
  /* animation: show 0.5s normal ease-in-out; */
}

.loadBox {
  position: relative;
  width: 100%;
  height: 100%;
}

.loading1 {
  width: 120px;
  height: 80px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -60px;
  margin-top: -40px;
}

.loading1 span {
  width: 10px;
  height: 100%;
  margin: 0px 6px;
  display: inline-block;
  background: #b3c4ff;
  ;
  animation: mymove 1.2s infinite ease-in-out;
  /*  
		mymove代表动画名字
		1.2s代表执行时间
		infinite表示一直循环执行
		ease-in-out表示先慢后快的缓动
	*/
}

.loading1>span:nth-child(2) {
  animation-delay: -1.0s;
}

.loading1>span:nth-child(3) {
  animation-delay: -0.9s;
}

.loading1>span:nth-child(4) {
  animation-delay: -0.8s;
}

.loading1>span:nth-child(5) {
  animation-delay: -0.7s;
}

@keyframes mymove {
  0% {
    transform: scaleY(0.4);
  }

  25% {
    transform: scaleY(1.0);
  }

  50% {
    transform: scaleY(0.4);
  }

  75% {
    transform: scaleY(0.4);
  }

  100% {
    transform: scaleY(0.4);
  }
}
